<template>
  <div class="box">
    <div class="line">
      <div class="itemBox nameItem">
        <el-checkbox v-model="this.isKeySelected.name" @change="handleChange($event, 'name')">花名</el-checkbox>
        <el-form-item v-if="this.isKeySelected.name" :model="form">
          <el-input class="itemInput" v-model="form.name" placeholder="请输入需要查找的花名" />
        </el-form-item>
      </div>
      <div class="itemBox otherNameItem">
        <el-checkbox v-model="this.isKeySelected.otherName" @change="handleChange($event, 'otherName')">别名</el-checkbox>
        <el-form-item v-if="this.isKeySelected.otherName" :model="form">
          <el-input class="itemInput" v-model="form.otherName" placeholder="请输入需要查找的花别名" />
        </el-form-item>
      </div>
    </div>
    <div class="line">
      <div class="itemBox florescenceItem">
        <el-checkbox v-model="this.isKeySelected.florescence"
          @change="handleChange($event, 'florescence')">花期</el-checkbox>
        <el-form-item v-if="this.isKeySelected.florescence" :model="form">
          <el-radio-group v-model="form.florescence">
            <el-radio label="春" />
            <el-radio label="夏" />
            <el-radio label="秋" />
            <el-radio label="冬" />
          </el-radio-group>
        </el-form-item>
      </div>
      <div class="itemBox originItem">
        <el-checkbox v-model="this.isKeySelected.origin" @change="handleChange($event, 'origin')">产地</el-checkbox>
        <el-form-item v-if="this.isKeySelected.origin" :model="form">
          <el-input class="itemInput" v-model="form.origin" placeholder="请输入需要查找的产地" />
        </el-form-item>
      </div>
    </div>

    <div class="line">
      <div class="sortSwitch">
        <el-switch v-model="form.order" active-value="DESC" inactive-value="ASC"
          style="--el-switch-on-color: #2a5caa; --el-switch-off-color: #ef4136" active-text="降序" inactive-text="升序" />
      </div>
      <div class="column">
        <el-select v-model="form.column" placeholder="排序键">
          <el-option v-for="item in column" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <el-button color="#009ad6" @click="searchFlowerKnowledge">搜索</el-button>
      <el-button color="#009ad6" plain @click="resettingSearch">重置</el-button>
    </div>

  </div>
</template>

<script>
import { reactive } from 'vue';
export default {
  name: "flowerKnowledgeSearch",
  data() {
    return {
      isKeySelected: {},
      form: reactive({
        name: null,
        otherName: null,
        origin: null,
        florescence: null,
        order: null,
        column: "id",
      }),
      column: {},
    }
  },
  created() {
    this.isKeySelected = {
      name: false,
      otherName: false,
      origin: false,
      florescence: false,
    }
    this.column = [
      {
        value: "id",
        label: "ID"
      },
      {
        value: "name",
        label: "花名"
      },
      {
        value: "otherName",
        label: "别名"
      },
      {
        value: "origin",
        label: "产地"
      },
      {
        value: "florescence",
        label: "花期"
      },
    ]
  },
  methods: {
    searchFlowerKnowledge() {
      this.$emit('queryEvent', this.form);
    },
    resettingSearch() {
      this.form = {
        name: null,
        otherName: null,
        origin: null,
        florescence: null,
        order: "ASC",
        column: "id",
      };
      this.$emit('queryEvent', this.form);
    },
    handleChange(event, label) {
      if (!event) {
        switch (label) {
          case 'name':
            this.form.name = null;
            break;
          case 'otherName':
            this.form.otherName = null;
            break;
          case 'origin':
            this.form.origin = null;
            break;
          case 'florescence':
            this.form.florescence = null;
            break;
        }
      }
    }
  }
}
</script>

<style scoped>
.itemBox {
  width: 250px;
  margin-bottom: 20px;
}

.line {
  float: left;
  padding-left: 40px;
}

.column {
  margin-bottom: 20px;
}
</style>